<% content_for :javascript_head do %>   
  <script type="text/javascript" src="js/vendor/jquery-1.11.2.min.js"></script>
  <script language="javascript">
    $(function(){
      if ( $("#message").text().length>2 )
       {   $("#message").animate({
             'bottom':'5px'
           },1000,function(){ setTimeout(function(){$("#message").fadeOut(3000);},2000);})
        }
    });

    function CheckForm() {
        var username = document.getElementById("login");
        var password = document.getElementById("password");
        var validate = document.getElementById("validate");

        if (username.value == "") {
            alert("请输入用户名！");
            username.focus();
            return false;
        }
        if (password.value == "") {
            alert("请输入密码！");
            password.focus();
            return false;
        }
        if (validate.value == "") {
            alert("请输入验证码！");
            validate.focus();
            return false;
        }
        return true;
    }

    function reImg(){
      var img = document.getElementById("rucaptcha_image");
      document.getElementById("rucaptcha_image").src = img.src.split('?')[0] + '?' + (new Date()).getTime();
    }

  
   </script>
    <script src="js/vendor/bootstrap.min.js"></script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>
<% end %>

<section class="panel b-blue" >
         <article class="panel__wrapper">
           <div class="panel__content">
             <div class="container">
               <div class="row">
                 <div class="col-md-8 col-md-offset-2">
                   <div class="home-content">
                     <div class="home-heading" >
                       <h1 ><em >智慧社区</em>治安管理系统</h1>   
                     </div>
                     <div class="row">
                       <div >
                          <div class="home-box-content col-md-12" style="width: 90%;margin-left: -9%;">
                               <div class="left-text">
                                 <h4>LOGIN: <em>系统登录</em> </h4>
                                 <%= form_tag("/create_login_session", {:onsubmit => "return CheckForm()", :class=>"form-horizontal", :role=>"form"}) do %>
                                            <div class="form-group">
                                            <label  class=" control-label" style="font-weight:bold;">登陆账号:</label>
                                            <div >
                                            <input type="text" id="login" name="login" class="form-control" placeholder="请输入用户名"/>
                                            </div>
                                            </div>
                                            <div class="form-group">
                                            <label  class=" control-label">登陆密码:</label>
                                            <div >
                                            <input type="password" id="password" name="password" class="form-control" placeholder="请输入登录密码"/>
                                            </div>
                                            </div>
                                            <div class="form-group">
                                                  <a href="javascript:" onclick="reImg();">
                                                      <%= rucaptcha_image_tag(id: 'rucaptcha_image',alt: 'Captcha') %>
                                                  </a>
                                                  <%= rucaptcha_input_tag(id: 'validate' ,placeholder:'请输入验证码') %>
                                            </div>
                                            <div class="form-group right-image">
                                            <button type="submit" class="btn btn-info">登录</button>
                                            </div>
                                <% end %>
                          </div>
                             </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </article>
       </section>
     <style type="text/css">
      #lightbox{
        display: none;
      }
      .form-control{
        width: 120%;
      }
      .home-content .left-text{
        width: auto;
      }
      .home-content
      {margin:0;}
      .home-content h1 {
        padding-top: 30px;
      }
      .home-content {
             background-color: rgba(104, 153, 218, 0);

        }
        em {
        color: #080808;
      font-size: 65px;}
      .home-content h1 em{
        font-size: 65px;
      }
      .home-content .left-text h4 em {
  
    font-size: 27px;
}
     </style>